<script lang="ts">
import { defineComponent, ref } from "vue";
import { useCommonStore } from "@/stores/commonStore";
import { showToast } from "vant";

interface menu {
  name: string,
  label: string,
  path: string,
  icon: string
}


export default defineComponent({
  name: "homeViews",
  components: {},
  setup() {


    function changeTitle(menu: menu) {
      const commonStore = useCommonStore();
      commonStore.title.name = menu.label;
      commonStore.title.hasBack = false;
    }

    const onClickLeft = () => history.back();
    const onClickRight = () => showToast("按钮");

    const menuList = [
      { name: "index", label: "主页", path: "/main/index", icon: "home-o" },
      { name: "add", label: "添加日期", path: "/main/date-converter", icon: "search" },
      { name: "settings", label: "设置", path: "/main/settings", icon: "setting-o" }
    ];
    return {
      activeTab: ref("index"),
      menuList,
      commonStore: useCommonStore(),
      changeTitle,
      onClickLeft,
      onClickRight
    };
  }


});
</script>

<template>
  <div>

    <van-nav-bar
      :title="commonStore.title.name"
    >
      <template #left>
        <div v-if="commonStore.title.hasBack" class="text-blue" @click="onClickLeft">
          <van-icon name="arrow-left" />
          返回
        </div>
      </template>
      <template #right>
        <div v-if="commonStore.title.rightConf">
          <van-icon :name="commonStore.title.rightConf.rightIcon" size="18"
                    @click="commonStore.title.rightConf.rightFun" />
          {{ commonStore.title.rightConf.rightName }}
        </div>
      </template>

    </van-nav-bar>

    <router-view />
    <van-tabbar v-model="activeTab">
      <van-tabbar-item v-for="menu in menuList" :icon="menu.icon" :name="menu.name" :to="menu.path"
                       @click="changeTitle(menu)">
        {{ menu.label }}
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>
